<template>
	<view>

		<view class="mode">
			<u-form :model="form" ref="uForm">
				<u-form-item :border-bottom="false" prop="name" label="姓名" label-width="200">
					<u-input v-model="form.name" input-align="right" placeholder="请输入姓名" />
				</u-form-item>

				<u-form-item :border-bottom="false" prop="address" label="城市" label-width="200" @click="issddress=true">
					<u-input v-model="form.address" input-align="right" placeholder="请选择所在城市" type="select"
						@click="issddress=true" />
				</u-form-item>


				<u-form-item :border-bottom="false" prop="mobile" label="手机号" label-width="200">
					<u-input v-model="form.mobile" input-align="right" placeholder="请输入手机号" type="Number" />
				</u-form-item>

			</u-form>
			<upload ref="videoUpload" type="video" @uploaded="uploaded" :afterLoadUrl="form.image_url"
				background="#818DFF" borderRadius="20" iconColor="#fff" width="160" height="160"></upload>


			<u-picker mode="region" v-model="issddress" :params="{province:true,city:true,area:false}"
				:default-region="[userAddress.province,userAddress.name]" @confirm="sure"></u-picker>

			<u-button @click="submit" type="primary" :custom-style="{width:'500rpx'}" shape="circle">立即定制</u-button>

		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import upload from "../../components/upload_img.vue";

	export default {
		components: {
			upload
		},
		computed: {
			...mapState(['userAddress'])
		},
		data() {
			return {
				issddress: "",
				form: {
					address: "",
					name: "",
					mobile: ""
				},
				regionArr: [],
				rules: {
					name: [{
						required: true,
						message: '请输入姓名',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					}],
					address: [{
						required: true,
						message: '请选择所在城市',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					}],

					mobile: [{
						max: 11,
						message: '手机号码不正确',
						trigger: 'change'
					}, {
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// this.$u.test.mobile()就是返回true或者false的
							return this.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						// 触发器可以同时用blur和change
						trigger: ['change', 'blur'],
					}]
				}
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad() {
			this.jiazai()
		},
		onShow() {

		},
		methods: {
			sure(e) {
				var p = e.province.label;
				var c = e.city.label;
				this.form.address = c
			},
			jiazai() {
				this.$u.post('/api/index/banner', {

				}).then(res => {

				}).catch(err => {

				})
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {

					} else {
						console.log('验证失败');
					}
				});
			}
		}
	}
</script>

<style>
	.u-form-item__message {
		text-align: right;
	}
</style>
